<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/order/commit.css">
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
    <div id="app">
        <!--======================== header ========================= -->
    <div id="header">
        <div class="logo">
            <a href="">随风</a>
            <img src="../images/index/logo.jpg" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">去旅行</a></li>
                <li><a href="">个人中心</a></li>
                <a href="javascript:void(0)" class="box">
                    <input type="text" class="box-search">
                </a>
                <div class="search-btn">
                    <a class="btn" href="javascript:void(0)">
                        <i class="icon-search"></i>
                    </a>
                </div>
            </ul>
        </div>
        <div class="login">
            <a href="">登录</a>
            <span class="split">|</span>
            <a href="">注册</a>
        </div>
    </div>
    <div class="order-it">
        <div class="trav">
            <h2>
                <i class="step-num">1</i>
                出行人信息
            </h2>
            <div class="order-ctn">
                <div class="name">
                    <input type="text" placeholder="中文姓名">
                </div>
                <div class="phone">
                    <input type="text" placeholder="联系电话">
                </div>
            </div>
        </div>
        <div class="order-pro">
            <h2>
                <i class="step-num">2</i>
                产品信息
            </h2>
            <div class="pro-img">
                <img src="../images/pro5.jpg" alt="">
            </div>
            <div class="pro-adv">
                <h2>
                    <a href="javascript:viod(0)">
                        【深度经典】苏州 园林纯玩一日游-双5A景区（拙政园+狮子林+寒山寺+虎丘+山塘街-多个套餐选择/火车站免费上门接）
                    </a>
                </h2>
                <div class="pro-dt">
                    <span>
                        <b>出行日期</b>
                        <i>2024-09-18</i>
                    </span>
                    <span>
                        <b>数量</b>
                        <i>成人x1</i>
                    </span>
                </div>
            </div>
        </div>
        <div class="order-count">
            <div class="order-coup">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="order-price">
                <ul>
                    <li class="origin-price">
                        <span>产品金额：</span>
                        <em>￥98.00</em>
                    </li>
                    <li class="pay-price">
                        <span>支付总金额：</span>
                        <i>￥98.00</i>
                    </li>
                </ul>
            </div>
        </div>
        <div class="sub-order">
            <a href="payment.html" class="btn-order">提交订单</a>
        </div>
    </div>
    </div>
</body>
</html>
<script src="../js/order/commit.js"></script>